<template>
	<div class="theme">
		<van-nav-bar left-arrow @click-left="$router.back(-1)"></van-nav-bar>
		<div class="overlay headTop">
			<div class="overlay-content scrolling">
				<div class="indep-detail">
					<div class="indep-detail-title">
						<p>No.</p>
						<p>订单号：<span v-text="ipdPool.orderId"></span></p>
					</div>
					<div class="indep-detail-content">
						<van-cell title="参与数量">
							<span v-text="ipdPool.num"></span>
						</van-cell>
						<van-cell title="周期">
							<span v-text="ipdPool.cycle + '天'"></span>
						</van-cell>
						<van-cell title="参与日期">
							<span>{{ipdPool.createTime | formatDate}}</span>
						</van-cell>
						<van-cell title="收益列表" @click="listShow = !listShow">
							<van-icon :name="listShow ? 'arrow-down' : 'arrow-up'" />
						</van-cell>
						<div class="indep-detail-content-list" v-if="listShow">
							<van-row type="flex">
								<van-col span="8">
									<p>日期</p>
								</van-col>
								<van-col span="8">
									<p>收益率</p>
								</van-col>
								<van-col span="8">
									<p>收益</p>
								</van-col>
							</van-row>
							<van-row type="flex" v-for="(el,i) in list" :key="i">
								<van-col span="8">
									<p>{{el.createTime | formatDate}}</p>
								</van-col>
								<van-col span="8">
									<p v-text="parseFloat(el.releaseRatio * 10000 / 100).toFixed(3).slice(0,-1) + '%'"></p>
								</van-col>
								<van-col span="8">
									<p v-text="parseFloat(el.releaseNum).toFixed(5).slice(0,-1)"></p>
								</van-col>
							</van-row>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	let _this;
	import { base } from './../utils/api';
	import { formatDate } from './../utils/date';
	export default {
		name: 'IndependentDetails',
		components: {},
		props: {},
		data() {
			return {
				list: [],
				tab: true,
				orderShow: false,
				showKeyboard: false,
				num: '',
				password: '',
				checked: '',
				listShow: true,
				ipdPool: {},
			};
		},
		beforeCreate() {
			_this = this;
		},
		watch: {},
		computed: {},
		methods: {
			getList() {
				this.axios.get(process.env.API_HOST + 'pool/ipdPoolDetail/' + this.ipdPool.id).then(res => {
					if(res.data.code == 200) {
						this.list = res.data.data;
					} else {
						this.$toast(res.data.msg)
					}
				})
			}
		},
		created() {},
		mounted() {
			this.ipdPool = JSON.parse(this.$route.params.ipdPool);
			this.getList();
			localStorage.nav = 2;
		},
		destroyed() {

		},
		filters: {
			formatDate(time) {
				let date = new Date(time);
				return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
			}
		}
	};
</script>

<style lang="less" scoped>
	.overlay-content {
		padding: 0px 10px 10px;
		.indep-detail {
			.indep-detail-title {
				padding-bottom: 15px;
				border-bottom: 1px solid #f4b56b;
				padding-left: 5px;
				p:first-child {
					font-size: 35px;
					padding: 0 0px 5px 5px;
				}
				p:not(:first-child) {
					font-size: 15px;
				}
			}
			.indep-detail-content {
				.van-cell {
					padding: 15px 5px 0;
				}
				.van-cell:not(:last-child)::after {
					border-bottom: 0;
				}
				.indep-detail-content-list {
					margin-top: 15px;
					text-align: center;
					background: #73c5cf;
					padding: 20px 10px;
					border-radius: 5px;
					color: #FFFFFF;
					font-size: 14px;
					p {
						color: #316167;
						margin-bottom: 10px;
					}
					.van-row:not(:first-child) {
						p {
							color: #FFFFFF !important;
						}
					}
					/deep/.van-cell__value {
						color: #999999;
					}
				}
			}
		}
	}
	
	/deep/ .van-nav-bar {
		background-color: #FFFFFF;
	}
	
	/deep/ .van-nav-bar .van-icon {
		color: #999999;
	}
	
	/deep/ .van-nav-bar__arrow {
		font-size: 18px;
	}
	
	.van-hairline--bottom::after {
		border-bottom-width: 0px;
	}
	
	.van-nav-bar__left {
		left: 8px;
	}
</style>